<template>
  <div class="flex flex-col min-h-screen overflow-hidden">
    <!-- Site header -->
    <Header />

    <!-- Page content -->
    <main class="grow">
      <!-- Banner -->
      <ServicesBanner :params="bannerParams" />

      <section>
        <div class="max-w-275 mx-auto py-8 px-6">
          <h2 class="text-[#5F5F5F] text-8 tracking-normal leading-14 font-bold mb-8">
            Equipments List
          </h2>
          <div class="p-4">
            <table class="table-auto w-full border-collapse border border-gray-300 text-center">
              <thead>
                <tr class="bg-gray-100">
                  <th class="border border-gray-300 px-4 py-2">Machine</th>
                  <th class="border border-gray-300 px-4 py-2">Brand/Model</th>
                  <th class="border border-gray-300 px-4 py-2">Specification</th>
                  <th class="border border-gray-300 px-4 py-2">Machining Precision</th>
                  <th class="border border-gray-300 px-4 py-2">Original</th>
                  <th class="border border-gray-300 px-4 py-2">Quantity (set)</th>
                </tr>
              </thead>
              <tbody>
                <template v-for="(section, index) in data1" :key="index">
                  <tr>
                    <td
                      :rowspan="section.items.length + 1"
                      class="font-bold border border-gray-300 px-4 py-2"
                    >
                      {{ section.category }}
                    </td>
                  </tr>
                  <tr v-for="(item, idx) in section.items" :key="idx">
                    <td class="border border-gray-300 px-4 py-2">{{ item.brand }}</td>
                    <td class="border border-gray-300 px-4 py-2">{{ item.specification }}</td>
                    <td class="border border-gray-300 px-4 py-2">{{ item.precision }}</td>
                    <td class="border border-gray-300 px-4 py-2">{{ item.original }}</td>
                    <td class="border border-gray-300 px-4 py-2">{{ item.quantity }}</td>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section>
        <div class="max-w-275 mx-auto py-8 px-6">
          <div class="p-4">
            <table class="table-auto w-full border-collapse border border-gray-300 text-center">
              <thead>
              <tr class="bg-gray-100">
                <th class="border border-gray-300 px-4 py-2">Machine</th>
                <th class="border border-gray-300 px-4 py-2">Brand</th>
                <th class="border border-gray-300 px-4 py-2">Clamping (force)</th>
                <th class="border border-gray-300 px-4 py-2">Shot volume (g)</th>
                <th class="border border-gray-300 px-4 py-2">Distance for Tiebar</th>
                <th class="border border-gray-300 px-4 py-2">Ejector Stroke (mm)</th>
                <th class="border border-gray-300 px-4 py-2">Mold Height (mm)</th>
                <th class="border border-gray-300 px-4 py-2">Original</th>
                <th class="border border-gray-300 px-4 py-2">Quantity (set)</th>
              </tr>
              </thead>
              <tbody>
              <template v-for="(section, index) in data2" :key="index">
                <tr>
                  <td :rowspan="section.items.length + 1" class="font-bold border border-gray-300 px-4 py-2">{{ section.category }}</td>
                </tr>
                <tr v-for="(item, idx) in section.items" :key="idx">
                  <td class="border border-gray-300 px-4 py-2">{{ item.brand }}</td>
                  <td class="border border-gray-300 px-4 py-2">{{ item.clamping }}</td>
                  <td class="border border-gray-300 px-4 py-2">{{ item.shotVolume }}</td>
                  <td class="border border-gray-300 px-4 py-2">{{ item.tiebarDistance }}</td>
                  <td class="border border-gray-300 px-4 py-2">{{ item.ejectorStroke }}</td>
                  <td class="border border-gray-300 px-4 py-2">{{ item.moldHeight }}</td>
                  <td class="border border-gray-300 px-4 py-2">{{ item.original }}</td>
                  <td class="border border-gray-300 px-4 py-2">{{ item.quantity }}</td>
                </tr>
              </template>
              </tbody>
            </table>
          </div>
        </div>
      </section>
    </main>
    <!-- Site footer -->
    <Footer />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Header from '/src/components/common/Header.vue'
import Footer from '/src/components/common/Footer.vue'
import ServicesBanner from '/src/components/ServicesBanner.vue'

import banner from '/src/images/quality-control/banner-equipment-list.webp'

const bannerParams = {
  title: 'EQUIPMENTS LIST',
  subtitle: [
    'Advanced Plastic Injection Molding',
    'Precision 3-, 4- and 5-axis CNC Machines',
    'Various Type of Testing Instruments'
  ],
  imgUrl: banner
}

const data1 = ref([
  {
    category: 'CNC Machining Center',
    items: [
      {
        brand: 'YCM / CV102A',
        specification: 'X1000*Y500*Z500',
        precision: '±0.04',
        original: 'Taiwan',
        quantity: 5
      },
      {
        brand: 'SEIKI/400DCG',
        specification: 'X560*Y400*Z400',
        precision: '±0.02',
        original: 'Japan',
        quantity: 6
      },
      {
        brand: 'Makino/V80S',
        specification: 'X1300*Y1000*Z600',
        precision: '±0.01',
        original: 'Japan',
        quantity: 2
      },
      {
        brand: 'FANUC ROBODRILL/a-D14MiA',
        specification: 'X800*Y500*Z450',
        precision: '±0.02',
        original: 'Japan',
        quantity: 3
      },
      {
        brand: 'YCM /CV56A',
        specification: 'X500*Y400*Z330',
        precision: '±0.02',
        original: 'Taiwan',
        quantity: 4
      },
      {
        brand: 'KINGFENG/MV850',
        specification: 'X800*Y500*Z450',
        precision: '±0.02',
        original: 'China',
        quantity: 3
      },
      {
        brand: 'YCM /CV2012B',
        specification: 'X560*Y400*Z400',
        precision: '±0.02',
        original: 'Taiwan',
        quantity: 3
      }
    ]
  },
  {
    category: 'Mirror EDM Machine',
    items: [
      {
        brand: 'HSPK/HE180',
        specification: 'X(900~1000)*Y700*Z500',
        precision: '±0.02',
        original: 'China',
        quantity: 1
      },
      {
        brand: 'Sodick/AM30LS',
        specification: 'X300*Y200*Z150',
        precision: '±0.02',
        original: 'Japan',
        quantity: 2
      },
      {
        brand: 'Charmilles/ROBOFOR-23',
        specification: 'X300*Y200*Z150',
        precision: '±0.02',
        original: 'Switzerland',
        quantity: 3
      },
      {
        brand: 'Makino/EDGE3',
        specification: 'X400*Y300*Z320',
        precision: '±0.01',
        original: 'Japan',
        quantity: 2
      },
      {
        brand: 'HongRong/CNCEDM-H45',
        specification: 'X400*Y300*Z320',
        precision: '±0.01',
        original: 'China',
        quantity: 4
      },
      {
        brand: 'HongRong/CNCEDM-H40',
        specification: 'X400*Y300*Z320',
        precision: '±0.01',
        original: 'China',
        quantity: 2
      }
    ]
  },
  {
    category: 'Wire-Cutting Machine',
    items: [
      {
        brand: 'Sanguang/DK7632',
        specification: 'X560*Y360*Z270',
        precision: '±0.02',
        original: 'China',
        quantity: 1
      },
      {
        brand: 'Sanguang/DK7625',
        specification: 'X350*Y250*Z270',
        precision: '±0.02',
        original: 'China',
        quantity: 1
      },
      {
        brand: 'LIAN GAO H-CUT50Z',
        specification: 'X500*Y600*Z500',
        precision: '±0.02',
        original: 'China',
        quantity: 2
      },
      {
        brand: 'LIAN GAO H-CUT32F',
        specification: 'X500*Y600*Z500',
        precision: '±0.02',
        original: 'China',
        quantity: 2
      },
      {
        brand: 'zhengtai',
        specification: 'X450*Y550*Z600',
        precision: '±0.02',
        original: 'China',
        quantity: 2
      },
      {
        brand: 'Sanxing',
        specification: 'X400*Y500*Z500',
        precision: '±0.02',
        original: 'China',
        quantity: 1
      },
      {
        brand: 'Hongshen',
        specification: 'X400*Y500*Z500',
        precision: '±0.02',
        original: 'China',
        quantity: 1
      },
      {
        brand: 'Kedi',
        specification: 'X400*Y320*Z300',
        precision: '±0.02',
        original: 'China',
        quantity: 1
      }
    ]
  },
  {
    category: 'Milling Machine',
    items: [
      {
        brand: 'FENG BAO/ES-1622MCA',
        specification: 'X600*Y400*Z450',
        precision: '±0.05',
        original: 'Taiwan',
        quantity: 6
      },
      {
        brand: 'Hyfair/3AG3060',
        specification: 'X600*Y400*Z450',
        precision: '±0.05',
        original: 'Taiwan',
        quantity: 4
      }
    ]
  },
  {
    category: 'Grinding Machine',
    items: [
      {
        brand: 'Qim-qb',
        specification: '1200*260(mm)',
        precision: '±0.05',
        original: 'China',
        quantity: 3
      }
    ]
  },
  {
    category: 'CNC Lathe',
    items: [
      {
        brand: 'CAK60',
        specification: 'X1600*Y800',
        precision: '-',
        original: 'China',
        quantity: 15
      }
    ]
  },
  {
    category: 'Laser Engraving Machine',
    items: [
      {
        brand: 'Dapeng/DP-75S',
        specification: '150*150',
        precision: '±0.03~0.05',
        original: 'China',
        quantity: 10
      }
    ]
  },
  {
    category: 'Inspection Machine',
    items: [
      {
        brand: 'SEREIN / SVM4030II',
        specification: 'X600*Y800*Z600',
        precision: '±0.0005~0.01',
        original: 'Switzerland',
        quantity: 1
      },
      {
        brand: 'SEREIN / Croma686',
        specification: 'X400*Y300*Z300',
        precision: '±0.0005~0.01',
        original: 'Switzerland',
        quantity: 1
      },
      {
        brand: 'SEREIN / Croma 8106',
        specification: 'X800*Y600*Z1000',
        precision: '±0.0005~0.01',
        original: 'Switzerland',
        quantity: 1
      },
      {
        brand: 'SEREIN / Spirit 600',
        specification: 'H 600mm',
        precision: '±0.0005~0.01',
        original: 'Switzerland',
        quantity: 1
      },
      {
        brand: 'Mitutoyo Corporation',
        specification: '0-25"/0.001mm',
        precision: '-',
        original: 'Japan',
        quantity: 1
      },
      {
        brand: 'Mitutoyo Corporation',
        specification: '0-24"/0-600mm',
        precision: '±0.005~0.01',
        original: 'Japan',
        quantity: 1
      },
      { brand: 'Nikon E21374', specification: '-', precision: '-', original: 'Japan', quantity: 1 },
      {
        brand: 'HR-150A/ZTJCJ/X0034',
        specification: '-',
        precision: '-',
        original: 'China',
        quantity: 1
      }
    ]
  }
]);

const data2 = ref([
  {
    category: '1 Shot Injection',
    items: [
      { brand: 'Haitian', clamping: '90T', shotVolume: '121', tiebarDistance: '360*360', ejectorStroke: 100, moldHeight: '150-380', original: 'China', quantity: 8 },
      { brand: 'Haitian', clamping: '120T', shotVolume: '1/3', tiebarDistance: '410*410', ejectorStroke: 120, moldHeight: '150-450', original: 'China', quantity: 1 },
      { brand: 'Haitian', clamping: '200T', shotVolume: '334', tiebarDistance: '320*320', ejectorStroke: 140, moldHeight: '200-550', original: 'China', quantity: 1 },
      { brand: 'Haitian', clamping: '530T', shotVolume: '2212', tiebarDistance: '830*830', ejectorStroke: 120, moldHeight: '350-850', original: 'China', quantity: 10 },
      { brand: 'Haitian', clamping: '100T', shotVolume: '69', tiebarDistance: '460*410', ejectorStroke: 100, moldHeight: '150-510', original: 'China', quantity: 5 },
      { brand: 'Haitian', clamping: '250T', shotVolume: '4/1', tiebarDistance: '540*540', ejectorStroke: 100, moldHeight: '300-500', original: 'China', quantity: 16 },
      { brand: 'Toyo', clamping: '180T', shotVolume: '147', tiebarDistance: '560*560', ejectorStroke: 120, moldHeight: '200-600', original: 'Japan', quantity: 4 },
      { brand: 'Toyo', clamping: '230T', shotVolume: '201', tiebarDistance: '610*610', ejectorStroke: 150, moldHeight: '250-680', original: 'Japan', quantity: 4 },
      { brand: 'Toyo', clamping: '280T', shotVolume: '522', tiebarDistance: '730*730', ejectorStroke: 150, moldHeight: '300-750', original: 'Japan', quantity: 25 },
    ],
  },
  {
    category: '2 Shot Injection',
    items: [
      { brand: 'Haitian', clamping: '320T', shotVolume: '1/3/792', tiebarDistance: '670*670', ejectorStroke: 127, moldHeight: '215-645', original: 'China', quantity: 7 },
    ],
  },
  {
    category: 'Robot',
    items: [
      { brand: 'TOPSTAR', clamping: '/', shotVolume: '/', tiebarDistance: '/', ejectorStroke: '/', moldHeight: '/', original: 'China', quantity: 74 },
    ],
  },
  {
    category: 'Material Drying',
    items: [
      { brand: 'TOPSTAR', clamping: '/', shotVolume: '/', tiebarDistance: '/', ejectorStroke: '/', moldHeight: '/', original: 'China', quantity: 30 },
    ],
  },
  {
    category: 'Mold Temperature Device',
    items: [
      { brand: 'TOPSTAR', clamping: '/', shotVolume: '/', tiebarDistance: '/', ejectorStroke: '/', moldHeight: '/', original: 'China', quantity: 65 },
    ],
  },
]);
</script>

<style scoped>
:deep(.my-button-prev) {
  position: absolute;
  top: 50%;
  left: 0;
  cursor: pointer;
  width: 25px;
  height: 25px;
  z-index: 10;
}

:deep(.my-button-next) {
  position: absolute;
  top: 50%;
  right: 0;
  cursor: pointer;
  width: 25px;
  height: 25px;
  z-index: 10;
}
</style>
